<template>
  <ym-container @collapse="onCollapse">
    <ym-menu
        :items="menus"
        slot="aside"
        @select="onSelect"
        background-color="#2f3447"
        text-color="#eee"
        :collapse="collapse"
    />
    <ym-menu :items="tops" slot="top" @select="onSelect" mode="horizontal"/>
    <ym-router layer="main" @refresh="reload"/>
    <ym-router
      layer="footer"
      slot="footer"
    />
  </ym-container>
</template>

<script>
import YmContainer from '@/ym/layouts/YmContainer'
import YmMenu from "@/ym/views/YmMenu";

/**
 * 管理界面
 *     管理 菜单视图、用户视图、状态栏视图
 *     通过 store 决定要渲染的内容视图
 */
export default {
  data () {
    return {
      collapse: false,
      menus: [],
      tops: []
    }
  },
  props: {
    apis: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    YmContainer,
    YmMenu
  },
  mounted () {
    // 启动
    this.reload()
  },
  methods: {
    async reload (qs = {}) {
      // 直接写入
      this.menus = await this.$http.Get(this.apis.menus, qs);
      this.tops = await this.$http.Get(this.apis.departments, qs)

      // 通过视图实现联动
      // const vm = this

      // // 绑定顶部菜单视图
      // this.$store.commit('setView', {
      //   layer: 'menu',
      //   view: 'menu',
      //   definition: {
      //     items: [],
      //
      //   },
      //   event: {
      //     select: vm.onSelect
      //   }
      // })
      //
      // // 绑定侧栏菜单视图
      // this.$store.commit('setView', {
      //   layer: 'departments',
      //   view: 'menu',
      //   definition: {
      //     items: [],
      //     backgroundColor: '#2f3447',
      //     textColor: '#eee'
      //   },
      //   event: {
      //     select: vm.onSelect
      //   }
      // })
      //
      // await this.$store.dispatch('reloadViewByUrl', {
      //   layer: 'menu',
      //   url: vm.apis.menus
      // })
      //
      // await this.$store.dispatch('reloadViewByUrl', {
      //   layer: 'departments',
      //   url: vm.apis.departments
      // })
    },
    /**
     * 响应菜单，重置内容页面
     */
    async onSelect (index, indexPath, item) {
      try {
        await this.$store.dispatch('reViewByUrl', {
          url: item.route.path,
          layer: 'main'
        })
      } catch (e) {
        // Do Nothing
      }
    },

    onCollapse (collapse) {
      this.collapse = collapse
    }
  }
}
</script>
